<template>
  <div class="md">
    <el-card>
      <article class="markdown-body">
          <component v-if="fileName" :is="content" :key="fileName" />
          <div v-else>{{ `${fileName}文档正在维护中...` }}</div>
        </article>
    </el-card>
  </div>
</template>
  
<script setup lang='ts'>
import {ref,shallowRef } from "vue"
import 'github-markdown-css'
const props = defineProps(["url"])

const fileName = ref<string>("")
const content = shallowRef('')

//这个值可以做个缓存
const res = import.meta.glob('../mdfile/*/*.md', { eager: true })

//根据传入的全路径，判断是哪个md文件，并加载
const getMdFileData = (name?: string) => {
  if (name) {
    Object.entries(res).forEach(([path, definition]: any) => {
      if (path === name) {
        fileName.value = name
        content.value = definition.default
      }
    })
  }
}
getMdFileData(props.url)

</script>
<style scoped lang="scss">
.md {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  width: 58%;
  padding: 0px 0px;
}
</style>